.center(@rw:center,@vl:center,@type:row){
  display: flex;
  justify-content: @rw;
  align-items:@vl;
  flex-direction: @type;
}

.check-Detail{
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  z-index: 1000;

  >div{
    overflow: auto;
    overflow-x: hidden;
    height: 900px;
    padding-bottom: 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
    .check-Detail-item{
      .order-num{
        color: #AFAFAF;
        font-size: 18px;
      }
      padding: 30px 30px 15px 30px;
      color:#666;
      .item-msg{
        position: relative;
        margin-top: 26px;
        .center();
        justify-content: flex-start;
        &-imgbox{
          align-self: flex-start;
          width: 167px;
          height: 120px;
          border: 1px solid #666666;
          .center();
          margin-right: 19px;
          img{
            width: 130px;
            max-height: 98%;
          }
        }
        &-content{
          p{
            text-overflow: ellipsis;
            overflow: hidden;
            // white-space: nowrap;
            margin-bottom: 12px;
          }
          .presentlist {
            display: flex;
            justify-content: space-between;

            span {
              display: inline-block;
              width: 370px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          p:first-child{
            line-height: 30px;
            span{
              color: #E21B23
            }
          }
          p:last-child{
            color:#ADABAB;
            margin-top: 30px;
          }
        }
        .cancel-order{
          position: absolute;
          right: 0;
          bottom:10px;
          color: #AFAFAF;
          text-align: right;
        }
      }
      .cancel-order{

        color: #AFAFAF;
        text-align: right;
      }
    }

    .check-Detail-process{
      border-top: 1px solid #B4B4B4;
      border-bottom: 1px solid #B4B4B4;
      >div{
        padding: 39px 59px 46px 59px;
        h2{
          text-align: center;
          font-size: 40px;
          color: #BB3C40;
        }
      }
      .process-list{
        display: flex;
        justify-content: center;
        margin-left: 1rem;
        &-item{
          margin-right: 18px;
          position: relative;
          .imgbox{
            .center(space-between);
            width: 125px;
            margin-top: 95px;
            position: relative;
            .imgline{
              width: 80px;
              height: 13px;
            }
            >span{
              color: #BB3C40;
              font-size: 18px;
              position: absolute;
              right: 5px;
              top: -10px;
            }
          }
          .process-time{
            width: 105px;
            text-align: center;
            font-size: 14px;
            transform: translate(-37%);
            position: absolute;
            top: 20%;
          }
          .process-name{
            width: 87px;
            text-align: center;
            transform: translate(-37%);
            margin-top: 23px;
          }
        }
      }
    }
    .process-msg{
      padding: 22px 32px;
      color: #666;
      border-top: 1px solid #B4B4B4;
      h3{
        font-size: 20px
      }
      >div{
        margin-top: 20px;
        span:first-child{
          display: inline-block;
          width: 140px;
          font-size: 18px
        }
      }
      p {
        color: #AFAFAF;
        margin-top: 18px;
      }
    }
	}
}